<template>
	<view class="content">
		<tarbar class="top-bar"><h4 class="tb_solt">通讯录</h4></tarbar>
		<view class="main">
			<view class="ground">
				<view class="item" @tap="goRequest">
					<view class="item-left">
						<view class="imgbox"><image src="../../static/images/users/newfriend.svg" mode="widthFix"></image></view>
					</view>
					<view class="item-right">新的朋友</view>
					<view class="tip" v-if="getAcquire">{{ getAcquire }}</view>
				</view>
				<view class="item" @tap="goGroup">
					<view class="item-left">
						<view class="imgbox"><image src="../../static/images/users/ground.svg" mode="widthFix"></image></view>
					</view>
					<view class="item-right">群聊</view>
				</view>
			</view>
			<template v-for="(value, key, index) in getFriends">
				<view class="ground" v-if="value.length > 0">
					<view class="ground-item" :id="key">{{ key }}</view>
					<view class="item" v-for="(item, index) in value" :key="item._id" @tap="goInfo(item.user._id)">
						<view class="item-left">
							<view class="imgbox"><image :src="item.user.avatars" mode="aspectFill"></image></view>
						</view>
						<view class="item-right">{{ item.nickName }}</view>
					</view>
				</view>
			</template>
			<view class="total">共有 {{getTotal}} 位好友</view>
		</view>
		<view class="alnavbar" @tap="clickAlnavbar">
			<view class="al-item" data-value="top">↑</view>
			<view class="al-item" v-for="(item, index) in alphabet" :key="index" :data-value="item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
import request from '../../api/request.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			alphabet: [],
		};
	},
	onLoad() {
		this.$store.dispatch('getFriends');
		this.$store.dispatch('getAcquire');
		this.$store.commit("changeAcquire")
		this.getAlphabet();
	},
	onShow() {
		let acquire = this.acquire;
	},
	watch:{
		// 监听好友的改变
		getFriends: {
			deep: true, //深度监听设置为 true
			handler(val, oldVal) {
				this.getAlphabet();
			}
		}
	},
	computed: {
		...mapGetters(['getAcquire', 'getFriends', 'getTotal'])
	},
	methods: {
		// 生成左侧的字母导航条
		getAlphabet() { 
			// for (var i = 0; i < 26; i++) {
			// 	let res = String.fromCharCode(65 + i);
			//  this.alphabet.push(res);
			// }
			this.alphabet = []
			for (let key in this.getFriends) {
				if (this.getFriends[key].length > 0) {
					this.alphabet.push(key);
				}
			}
		},
		// 点击左边的字母导航进行跳转
		clickAlnavbar(event) {
			uni.pageScrollTo({
				duration: 0,
				scrollTop: 0
			});
			if (event.target.dataset.value == 'top') {
				return;
			}
			let id = '#' + event.target.dataset.value;
			uni.createSelectorQuery()
				.select(id)
				.boundingClientRect(res => {
					if (res) {
						let top = res.top;
						// #ifdef APP-PLUS
						uni.pageScrollTo({
							duration: 0,
							scrollTop: top - 68
						});
						// #endif
						// #ifdef H5
						uni.pageScrollTo({
							duration: 0,
							scrollTop: top - 48
						});
						// #endif
					}
				})
				.exec();
		},
		// 好友详情页
		goInfo(id) {
			uni.navigateTo({
				url: '../information/information?id=' + id
			});
		},
		// 好友请求页面
		goRequest() {
			uni.navigateTo({
				url: '../request/request'
			});
		},
		//群组页面
		goGroup() {
			uni.navigateTo({
				url: '../group/group'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.content {
	position: relative;
}
.main {
	padding-bottom: 0rpx !important; 
	.item {
		display: flex;
		height: 88rpx;
		margin: 10rpx 10rpx;
		position: relative;
		.item-left {
			flex: 2;
			display: flex;
			justify-content: center;
			.imgbox {
				height: 76rpx;
				margin: 6rpx;
				width: 76rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.item-right {
			flex: 8;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 30rpx;
		}
		.tip {
			background: red;
			padding: 10rpx;
			line-height: 26rpx;
			position: absolute;
			right: 40rpx;
			top: 20rpx;
			font-size: 26rpx;
			color: white;
			border-radius: 20rpx;
		}
	}
	.ground-item {
		background: rgb(240, 240, 240);
		height: 50rpx;
		color: rgb(99, 99, 99);
		font-size: 26rpx;
		line-height: 50rpx;
		text-indent: 46rpx;
	}
}
.main .ground .item:not(:last-child) .item-right {
	border-bottom: 2rpx solid rgb(223, 223, 223);
}
.total{
	background: rgb(240, 240, 240);
	padding: 20rpx 0rpx;
	text-align: center;
	color: #7a7a7a;
	font-size: 30rpx;
}
.alnavbar {
	position: fixed;
	top: 50%;
	right: 20rpx;
	transform: translateY(-50%);
	z-index: 990;
	color: rgb(120, 120, 120);
	font-size: 24rpx;
	text-align: center;
	.al-item {
		margin: 4rpx 0rpx;
	}
}
</style>
